<template>
    <div>
        <div class="msg-alert" :class="{ 'msg-alert-hidden': msgHidden }">
            <span v-if="articleCount>0">为您推荐了{{articleCount}}篇文章</span>
            <span v-if="articleCount==0">暂时没有更新，休息一会儿吧</span>
        </div>
        <div v-show="msgShow" ref="msgAlertPlace" class="msgAlert-place" @click="feedRefreshClick">
            <div class="msg-alert" :class="{ 'msg-alert-fixed': msgFixed }" ga_event="refresh_float_click">
                <span>您有未读新闻，点击查看</span>
                <tt-icon type="close_small" size="15" color="#fff" @click.native="closeMsgClick"></tt-icon>
            </div>
        </div>
    </div>
</template>

<style lang="less">
    .msgAlert-place {
        height: 32px;
    }
    .msg-alert {
        position: relative;
        height: 32px;
        line-height: 32px;
        font-size: 14px;
        color: #fff;
        text-align: center;
        background-color: #60a3f5;
        background-color: rgba(96,163,245,.85);
        z-index: 20;
        transition-property: height;
        transition-delay: 0;
        transition-duration: .5s;

        &-fixed {
            width: 660px;
            position: fixed;
            top: 0;
            margin-top: 0;
        }

        &-hidden {
            height: 0;
            span {
                display: none !important;
            }
        }

        span {
            cursor: pointer;
            min-width: 500px;
            display: inline-block;
        }

        i {
            position: absolute;
            top: 9px;
            right: 4px;
            font-size: 15px;
            cursor: pointer;
            z-index: 10;
        }
    }
</style>

<script>
  import throttle from 'lodash/throttle';
  import { elOffset, getScrollTop } from '../../../../src/js/utils.js';
  import Emitter from '../../../../src/mixins/emitter.js';

  export default {
    name: 'MsgAlert',
    mixins: [ Emitter ],
    props: {
      category: String,
      suspensionTip: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        msgHidden: true,
        msgShow: false,
        msgFixed: false,
        articleCount: -1
      };
    },
    mounted() {
      this.waitTime = 360000;

      // 刷新文章数目提示
      this.$on('feed-refresh-count', function(count) {
        if (this.msgTimer) clearTimeout(this.msgTimer);

        this.articleCount = count;

        this.msgHidden = false;
        this.msgTimer = setTimeout(() => {
          this.msgHidden = true;
        }, 2300);
      });

      this.$on('feed-refresh', function() {
        this.msgShow = false;
      });

      if (!this.suspensionTip) return;

      this.msgOffsetTop = 0;
      window.addEventListener('scroll', throttle(() => {
        this._stateChange();
      }, 50), false);

      this._timerUpdate();
    },
    methods: {
      closeMsgClick() {
        this.msgShow = false;
        this._timerUpdate();
      },
      feedRefreshClick() {
        this.msgShow = false;
        this._timerUpdate();
        this.dispatch('FeedBox', 'feed-refresh');
      },
      _timerUpdate() {
        if (this.refreshTimer) {
          clearTimeout(this.refreshTimer);
          this.refreshTimer = null;
        }

        this.refreshTimer = setTimeout(() => {
          this.msgShow = true;
          this.msgFixed = false;
          // dom变化后取响应的offset值才有效
          this.$nextTick(() => {
            this._stateChange();
          });
        }, this.waitTime);
      },
      _stateChange() {
        if (!this.msgShow) return;

        let offsetTmp = elOffset(this.$refs.msgAlertPlace).top,
          scrollTop = getScrollTop(window);

        if (this.msgOffsetTop < offsetTmp) this.msgOffsetTop = offsetTmp;

        this.msgFixed = scrollTop > this.msgOffsetTop;
      }
    }
  };
</script>



// WEBPACK FOOTER //
// msgAlert.vue?5c19bab1